<!--
  * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
  * No deletion without permission, or be held responsible to law.
  * @author ThinkGem
-->
<template>
  <BasicDrawer
    v-bind="$attrs"
    :showFooter="true"
    @register="registerDrawer"
    width="60%"
    :showOkBtn="false"
  >
    <template #title>
      <Icon icon="ant-design:book-outlined" class="pr-1 m-1" />
      <span> 查看公告 </span>
    </template>
    <div class="text-xl text-center pt-4 pb-6 ml-2 mr-2 mb-5 jeesite-msg-title">
      {{ record?.msgTitle }}
    </div>
    <BasicForm @register="registerForm" />
  </BasicDrawer>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsMsgMsgInnerView',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { MsgNotify, msgNotifyForm } from '/@/api/msg/msgNotify';

  const { t } = useI18n('msg.msgInner');
  const record = ref<MsgNotify>();

  const inputFormSchemas: FormSchema[] = [
    {
      label: t('开始时间'),
      field: 'startDate',
      component: 'DatePicker',
      componentProps: {
        format: 'YYYY-MM-DD HH:mm',
        showTime: { format: 'HH:mm' },
      },
      required: true,
    },
    {
      label: t('结束时间'),
      field: 'endDate',
      component: 'DatePicker',
      componentProps: {
        format: 'YYYY-MM-DD HH:mm',
        showTime: { format: 'HH:mm' },
      },
      required: true,
    },
    {
      label: t('内容'),
      field: 'msgContent',
      component: 'Text',
      componentProps: {
        isHtml: true,
      },
      colProps: { lg: 24, md: 24 },
    },
    {
      label: t('发送者'),
      field: 'sendUserName',
      component: 'Text',
    },
    {
      label: t('发送时间'),
      field: 'sendDate',
      component: 'Text',
    },
  ];

  const [registerForm, { resetFields, setFieldsValue }] = useForm({
    labelWidth: 120,
    schemas: inputFormSchemas,
    baseColProps: { lg: 12, md: 24 },
  });

  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
    setDrawerProps({ loading: true });
    const res = await msgNotifyForm(data);
    record.value = (res.msgNotify || {}) as MsgNotify;
    record.value.__t = new Date().getTime();
    setFieldsValue(record.value);
    setDrawerProps({ loading: false });
  });
</script>
<style lang="less">
  .jeesite-msg-title {
    border-bottom: 1px solid #ddd;
  }
  [data-theme='dark'] {
    .jeesite-msg-title {
      border-bottom: 1px solid #303030;
    }
  }
</style>
